<script setup lang="ts">
import { NewsStore } from "@/stores/newsStore";

const NewStore = NewsStore();
const { NewsList } = storeToRefs(NewStore);
const news_list = ref([
  {
    name: "微博",
    id: "KqndgxeLl9",
    url: "https://file.ipadown.com/tophub/assets/images/media/s.weibo.com.png_50x50.png",
  },
  {
    name: "知乎",
    id: "mproPpoq6O",
    url: "https://file.ipadown.com/tophub/assets/images/media/zhihu.com.png_50x50.png",
  },
  {
    name: "微信",
    id: "WnBe01o371",
    url: "https://file.ipadown.com/tophub/assets/images/media/mp.weixin.qq.com.png_50x50.png",
  },
  {
    name: "百度",
    id: "Jb0vmloB1G",
    url: "https://file.ipadown.com/tophub/assets/images/media/baidu.com.png_50x50.png",
  },
  {
    name: "36氪",
    id: "Q1Vd5Ko85R",
    url: "https://file.ipadown.com/tophub/assets/images/media/36kr.com.png_50x50.png",
  },
  {
    name: "哔哩哔哩",
    id: "74KvxwokxM",
    url: "https://file.ipadown.com/tophub/assets/images/media/bilibili.com.png_50x50.png",
  },
  {
    name: "抖音",
    id: "DpQvNABoNE",
    url: "https://file.ipadown.com/tophub/assets/images/media/iesdouyin.com.png_50x50.png",
  },
  {
    name: "拼多多",
    id: "ARe1QZ2e7n",
    url: "https://file.ipadown.com/tophub/assets/images/media/p.pinduoduo.com.png_50x50.png",
  },
]);
const New_img = ref("");
const New_title = ref("");
const active_id = ref("");
function get_new_data(id: string, name: string, url: string) {
  active_id.value = id;
  const data = {
    id,
    //@ts-ignore
    newstoken: Lm(),
  };
  NewStore.getNewsList(data);
  New_img.value = url;
  New_title.value = name;
}
get_new_data(
  "KqndgxeLl9",
  "微博",
  "https://file.ipadown.com/tophub/assets/images/media/s.weibo.com.png_50x50.png"
);
</script>
<template>
  <div class="main">
    <div class="new_content">
      <div class="left">
        <ul>
          <li
            :class="{ active: item.id === active_id }"
            v-for="item in news_list"
            :key="item.id"
            @click="get_new_data(item.id, item.name, item.url)"
          >
            <img :src="item.url" alt="" />
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="title">
          <img :src="New_img" alt="" />
          <h2>{{ New_title }} · 热搜榜</h2>
        </div>
        <div class="body">
          <ul>
            <li v-for="item in NewsList.result">
              <span class="index">{{ item.index }}</span>
              <a :href="item.link" target="_blank">{{ item.title }}</a
              ><span class="num">{{ item.hotValue }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.main {
  width: 1200px;
  margin: 0 auto;
  .new_content {
    margin-top: 30px;
    display: flex;
    min-height: 800px;
    background-color: var(--el-bg-color);
    border-radius: 5px;
  }
  .left {
    width: 20%;
    border-right: 1px solid var(--el-bg-color);
    ul {
      margin-top: 20px;
      img {
        height: 25px;
        border-radius: 5px;
        margin-right: 10px;
      }
      li {
        color: var(--el-text-color-primary);
        height: 40px;
        display: flex;
        align-items: center;
        padding-left: 30%;
        cursor: pointer;
        transition: all 0.1s;
      }
      li.active {
        background-color: #3a8ee6;
        color: var(--el-bg-color);
      }
      li:not(li.active) {
        //选择非active
        cursor: pointer;
        &:hover {
          color: #3a8ee6;
        }
      }
    }
  }
  .right {
    width: 80%;
    margin-left: 20px;
    .title {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--el-bg-color);
      img {
        width: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      h2 {
        font-size: 20px;
      }
    }
    .body {
      margin-top: 10px;
      ul {
        list-style: none;
        li {
          height: 30px;
          align-items: center;
          display: flex;
          a {
            color: var(--el-text-color-primary) !important;
          }
          font-size: 14px;
          &:nth-child(1) {
            .index {
              background-color: #fe2d46;
              color: var(--el-text-color-primary);
            }
          }
          &:nth-child(2) {
            .index {
              background-color: #ff6600;
              color: var(--el-text-color-primary);
            }
          }
          &:nth-child(3) {
            .index {
              background-color: #faa90e;
              color: var(--el-text-color-primary);
            }
          }
          .index {
            width: 20px;
            height: 20px;
            border-radius: 5px;
            color: var(--el-text-color-primary);
            background-color: var(--el-bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
          }
          a {
            width: 77%;
            color: #333333;
            transition: all 0.2s;
            &:hover {
              color: #3a8ee6;
            }
          }

          .num {
            margin-right: 20px;
            width: 20%;
            display: flex;
            justify-content: right;
          }
        }
      }
    }
  }
}
</style>
